<template>
  <div class="seting-box">
    <nav-bar class="header">
      <div slot="left" @click="goBack" class="back-icon">
        <img src="~assets/img/common/back.svg" alt="">
      </div>
      <div slot="center">账号管理</div>
    </nav-bar>
    <div class="input-item">
      <van-field v-model="nickName" label="昵称" />
      <van-field v-model="introduceSign" label="个性签名" />
      <van-field v-model="password" type='password' label="修改密码" />
    </div>
    <van-button class="save-btn" color="#ff8198" type="primary" @click="save" block>保存</van-button>
    <van-button class="save-btn" color="#ff8198" type="primary" @click="logout" block>退出登录</van-button>
  </div>
</template>
<script>
import NavBar from 'components/common/navbar/NavBar'
import Vue from 'vue'
import { Field,Button} from 'vant'
import {getUserInfo, EditUserInfo, logout} from 'network/user'

Vue.use(Field)
Vue.use(Button)
export default {
  name:'account',
  components:{
    NavBar,

  },
  data() {
    return {
      nickName: '',
      introduceSign: '',
      password: ''
    }
  },
  async mounted() {
    const { data } = await getUserInfo()
    this.nickName = data.nickName
    this.introduceSign = data.introduceSign
  },
  methods: {
    async save() {
      const params = {
        introduceSign: this.introduceSign,
        nickName: this.nickName,
        passwordMd5: this.$md5(this.password)
      }
      const { data } = await EditUserInfo(params)
      Toast.success('保存成功')
    },
    async logout() {
      const { resultCode } = await logout()
      if (resultCode == 200) {
        localStorage.setItem('token', '')
        window.location.href = '/'
      }
    },
    goBack() {
      this.$router.go(-1);
    }
  },
}
</script>

<style >
  .seting-box {
    width: 100vw;
  }
  .seting-box .input-item{
    width: 80%;
    margin: 70px auto 0;
  }
  .seting-box  .save-btn{
    width: 80%;
    margin: 20px auto 0;
  }
</style>